<script setup>
import { onMounted, ref } from 'vue';
import { ArrowUp } from '@element-plus/icons-vue'

//文章分类数据模型
const categorys = ref([
    {
        "id": 3,
        "categoryName": "美食",
        "categoryAlias": "my",
        "createTime": "2023-09-02 12:06:59",
        "updateTime": "2023-09-02 12:06:59"
    }
])

const articles = ref([
    {
        "id": 5,
        "title": "陕西旅游攻略",
        "content": "兵马俑,华清池,法门寺,华山...爱去哪去哪...",
        "coverImg": "https://big-event-gwd.oss-cn-beijing.aliyuncs.com/9bf1cf5b-1420-4c1b-91ad-e0f4631cbed4.png",
        "state": "草稿",
        "categoryId": 2,
        "createTime": "2023-09-03 11:55:30",
    }
])

//分页条数据模型
const pageNum = ref(1)//当前页
const pageSize = ref(100)//每页条数
//用户搜索时选中的分类id
const categoryId = ref('')

//用户搜索时选中的发布状态
const state = ref('')
import { CategoryListService } from '@/api/category';
import { articleListService } from '@/api/article';
import { onUnmounted } from 'vue';

//查询所有的分类
const categoryList = async () => {
    let result = await CategoryListService();
    categorys.value = result.data;
}
categoryList();

//展示所有文章(或搜索)
const articleList = async () => {
    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        categoryId: categoryId.value ? categoryId.value : null,
        state: state.value ? state.value : null
    }
    let result = await articleListService(params);
    articles.value = result.data.items;

    for (let i = 0; i < articles.value.length; i++) {
        let article = articles.value[i];
        for (let j = 0; j < categorys.value.length; j++) {
            let category = categorys.value[j];
            if (article.categoryId === category.id) {
                article.categoryName = category.categoryName;
            }
        }
    }
}
articleList();

const scrollToTop = () => {
    window.scrollTo({
        top: 0,
        behavior: 'smooth' // 平滑滚动效果
    })
}

const showBackToTop = ref(false)

// 监听滚动事件
const handleScroll = () => {
  showBackToTop.value = window.scrollY > 300
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})

</script>



<template>
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body class="custom-background">

        <nav class="main-nav">
            <div class="container">
                <ul>
                    <li><router-link :to="'/home'" @click="scrollToTop"><i class="fas fa-home"></i> 首页</router-link>
                    </li>
                    <li><a href="/archive"><i class="fas fa-archive"></i> 归档</a></li>
                    <li><a href="/categories"><i class="fas fa-folder"></i> 分类</a></li>
                    <li><a href="/about"><i class="fas fa-user"></i> 关于</a></li>
                    <li><a href="/links"><i class="fas fa-link"></i> 友链</a></li>
                </ul>
            </div>
        </nav>

        <header class="site-header">
            <div class="container">
                <h1 class="site-title"><a href="/">GYG's BLOG</a></h1>
                <p class="site-description">分享技术与生活</p>
            </div>
        </header>

        <main class="container">
            <!-- 左边 -->
            <div class="content">

                <article class="post" v-for="post in articles">
                    <div class="post-left">
                        <img :src=post.coverImg alt="">
                    </div>
                    <div class="post-right">
                        <h2 class="post-title">
                            <router-link :to="'/article/' + post.id">{{ post.title }}</router-link>
                        </h2>
                        <div class="post-content" v-html="post.content">
                        </div>
                    </div>

                    <div class="kratos-post-meta-new">
                        <span class="pull-left">
                            <a><i class="fa fa-calendar"></i> {{ post.createTime }}</a>&nbsp;&nbsp;&nbsp;&nbsp;
                            <a href=""><i class="fa fa-commenting-o"></i> 18条评论</a>
                        </span>

                        <span class="pull-media">
                            <a href=""><i class="fa fa-eye"></i> 25.86k次阅读</a>&nbsp;&nbsp;&nbsp;&nbsp;
                            <a href="javascript:;" data-action="love" data-id="1303" class="Love"><i
                                    class="fa fa-thumbs-o-up"></i> 224人点赞</a>
                            &nbsp;&nbsp;<span><i class="far fa-tags"></i> <a href="/tag/JavaScript">{{ post.categoryName
                            }}</a></span>
                        </span>
                        <span class="pull-right">
                            <a class="read-more" href="'/article' + post.id" title="阅读全文">阅读全文 <i
                                    class="fa fa-chevron-circle-right"></i></a>
                        </span>
                    </div>
                </article>

                <!-- <div class="pagination">
                <a href="/page/1" class="prev">« 上一页</a>
                <a href="/page/3" class="next">下一页 »</a>
            </div> -->
            </div>

            <!-- 右边 -->
            <aside class="sidebar">
                <div class="widget">
                    <h3 class="widget-title"><i class="fas fa-search"></i> 搜索</h3>
                    <form action="/search" method="get">
                        <input type="text" name="q" placeholder="输入关键词...">
                        <button type="submit"><i class="fas fa-search"></i></button>
                    </form>
                </div>

                <div class="widget">
                    <h3 class="widget-title"><i class="fas fa-tags"></i> 标签云</h3>
                    <div class="tag-cloud">
                        <a href="/tag/JavaScript" class="tag">JavaScript</a>
                        <a href="/tag/CSS" class="tag">CSS</a>
                        <a href="/tag/HTML" class="tag">HTML</a>
                        <a href="/tag/Node.js" class="tag">Node.js</a>
                        <a href="/tag/生活" class="tag">生活</a>
                        <a href="/tag/摄影" class="tag">摄影</a>
                    </div>
                </div>

                <div class="widget">
                    <h3 class="widget-title"><i class="fas fa-link"></i> 友情链接</h3>
                    <ul class="links">
                        <li><a href="https://example.com" target="_blank">示例友链</a></li>
                        <li><a href="https://another.com" target="_blank">另一个网站</a></li>
                    </ul>
                </div>
            </aside>
        </main>

        <div>
            <!-- 返回顶部按钮 -->
            <transition name="fade">
                <button v-show="showBackToTop" @click="scrollToTop" class="back-to-top">
                    <!-- <i class="fas fa-arrow-up"></i> -->
                     <el-icon><ArrowUp /></el-icon>
                </button>
            </transition>
        </div>

        <footer class="site-footer">
            <div class="container">
                <p>© 2023 我的博客. 保留所有权利.</p>
                <p>Powered by <a href="https://github.com" target="_blank">GitHub Pages</a></p>
                <div class="social-links">
                    <a href="https://github.com/yourname" target="_blank"><i class="fab fa-github"></i></a>
                    <a href="https://twitter.com/yourname" target="_blank"><i class="fab fa-twitter"></i></a>
                    <a href="mailto:your@email.com"><i class="fas fa-envelope"></i></a>
                </div>
            </div>
        </footer>
    </body>

    </html>




</template>

<style src="@/css/BlogHome.css"></style>

<style>
/* 返回顶部按钮样式 */
.back-to-top {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #8e39c7;
  color: white;
  border: none;
  /* cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.3s ease;
  z-index: 999; */
}

.back-to-top:hover {
  background-color: #9251ac;
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.back-to-top:active {
  transform: translateY(0);
}

/* 淡入淡出动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
